https://discord.gg/botpress logo
Join Discord
Powered by
Webchat v2: How to embed it in an iframe and enabl...
# 📖tutorials
w
here's a very short video to explain simply how to do it, because I've noticed a few people having trouble doing it. Hope this will help !

https://youtu.be/0dhpMK4w858▾

w
You're awesome. Thank you!
w
You’re very welcome !
r
@wooden-beard-40210 I implemented the above code but my chatbot does not open with full width. can you help me with this?
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
          display: flex;
          flex-direction : column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          margin: 0;
          color: white;
          background-color: #ffffff;
          font-family: Arial, sans-serif;
        }
   
        .center-div {
          width: 50vw;
          height: 80vh;
          background-color: rgb(255, 75, 75);
          border-radius: 15px;
          padding: 5px;
          box-sizing: border-box;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
        }
   
        @media only screen and (max-width: 600px) {
          .center-div {
            height: 40vh;
            width: 80vw;
            background-color: rgb(232, 232, 232);
            border-radius: 15px;
            padding: 5px;
            box-sizing: border-box;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
          }
        }
      </style>
</head>
<body>
      <div>
        <div class="center-div">
        <iframe
        srcdoc="<script src='https://cdn.botpress.cloud/webchat/v2.1/inject.js'></script>
                <script src='https://mediafiles.botpress.cloud/cdd7f664-5489-4185-b2c6-7c3cc3539dd3/webchat/v2.1/config.js'></script></script><script>botpress.open()</script>" 
        style="width: 100%; height: 100%; border: none;"></iframe> <!-- Put your embed code inside the srccode of the iframe -->
        </div>
      </div>
</body>
</html>
https://cdn.discordapp.com/attachments/1272227414197669960/1280497962329313392/Screenshot_2024-09-03_at_5.31.12_PM.png?ex=66d84c28&is=66d6faa8&hm=28a03a53021eabaeabe49d62883ed5b641758eec569031ffde055f03f3e7a6c2&
h
I have the same problem, i tested on Chrome, Edge and Firefox (here is worst, but i think there's a problem of compatibility of integration)
i also tried changing webchat/v2.1 with webchat/v2 but nothing changed
i'm trying changed browser's windows size and i notice that: WIDTH 1. under width of 768px chatbot has div full size 2. over the chatbot has a fixed with of 400px
I'm fixing adding 
max-width: 768px;
in 
.center-div {...}
I don't like very much but it seems to work. I'd like have two botpress webchat templates: one to use bubble (site's pages) and one to place in full-screen (landing's pages)
w
Hum
I’ll have a look
Maybe just play with the webchat width , or iframe
h
I added this code in `srcdoc `attributes of iframe, to override 
@media
in generated stylesheet:
Copy code
css
<style>@media (min-width:768px) { .bpOpen { width: 100%; height: 100%; right: 0; bottom: 0; max-height: 100% } }</style>
b
@wooden-beard-40210 It still seems to appear as a widget, inside the blue box. I see on the youtube in the comments you say something about the botpress open command, but I'm not clear on how to do that. Thanks!
w
b
maybe I put that snippet in the wrong spot.
w
okay, so did you write this line : 
<script>botpress.open()</script>
b
Ah, yes, I got that in there and now I'm making progress. Thanks for the help, I'll go bug ChatGPT to get me the rest of the way. Merci.
w
okay, pas de soucis ^^
h
or as suggested by @fresh-fireman-491 in this post https://discord.com/channels/1108396290624213082/1280180718986596443/1280250218679500820 use
Copy code
js
window.botpress.on('webchat:ready', (conversationId) => { botpress.open(); });
that waits webchat is ready before trying to open it
w
to hide the bubble I added
Copy code
css
.bpFab { display: none; }
but i don't know how to hide the close button because element is in a inner 
iframe
You can play on the width of the 
center-div
relative to the viewport size. Here’s an example to enlarge it with a max-width of 1024px. Try here, webchat v2 in a div using iframe: https://jsfiddle.net/Zannax_Botpress/u4sewa82/
c
I've tried this example @white-nest-40686 with webchat embed code v2.2 but I can't get the bot to automatically open. Your example is using 2.1 so perhaps it's a change with v2.2 of the script? If so, can you suggest an update to get it working again with 2.2? I have taken your JSFiddle and dropped in the two script lines provided in the "Share" area of webchat for "Embed code" and when I run it, it doesn't open. I don't see an error in the browser console. https://cdn.discordapp.com/attachments/1272227414197669960/1291085949970808963/BP_Studio_Assistant_-_BP_Studio_Assistant_2024.10.02_at_01.08PM2x.png?ex=66fed0fd&is=66fd7f7d&hm=3d5de9f731c6e7acf5cf0df57337b35312f3780f9a864a4243e1fa1f244cf0f5&
w
Thank you, @crooked-pager-59070. I didn't know that they changed the webchat. I've tried the new option under "Theme" and saved it before using the new embed code, and it worked.
o
Botpress Full-Screen in iFrame html, body { margin: 0; padding: 0; height: 100%; width: 100%; background-color: #ffffff; font-family: Arial, sans-serif; } /* Ensure the iframe takes up the full screen */ iframe { width: 100vw; height: 100vh; border: none; } <iframe srcdoc=" window.botpress.on('webchat:ready', function () { botpress.open(); // Automatically open the chatbot when ready }); "> I am using this example from Francois and it works (the full screen and auto open work) but as soon as I inject my script, I get the the blue bubble and mini screen.
May it be something related to the bot CSS?
yes place this feature ASAP
w
In the two fiddle links, I put all the fixes. One is full width contained in a div / iframe, while the second is displayed in full screen on the page
FYI, the new version 2.2 of the webchat has issues with customizations for full-width divs and full-screen mode. Good news, you can continue using version 2.1
I fixed the examples: - For full width in a div, the problem was that the new version checks if the 
<body>
tag exists. - The 
webchat:ready
event does not trigger, so I used a listener 
on load
event. - For full size, I should use 
!important
on every item. Now, the webchat uses the same class name .bpOpen and has introduced a new class 
.bpWebchat
, which I utilized
[Botpress Full-Width in a DIV v2.2](https://jsfiddle.net/Zannax_Botpress/h8g1kx7f/) [Botpress Full-Screen v2.2](https://jsfiddle.net/Zannax_Botpress/9ghaeL0r/)
There's an issue with the bot: when you update the description and publish, the changes do not appear.
b
with the example code from full screen v2.2
ah, origin issue
found it, was the origin
thanks for that example! :)
b
is there any way to hide the close button 'showCloseButton': false this property used to work with v1 bots but it seems it doesnot with v2 bots
w
Until 2.1 no. If you do it in theme tab is for all the webchat
Happy to help
b
do you know what the normal width is? vs 100%
"native width" on web :P
w
Just comment my css for .bpWebchat that override the botpress one
b
oh, irght
got it
w
Pay attention there are 2 definition, One for all widths and this for width over 768px
I have not modified the default settings because I didn't need to change anything on mobile. Width < 768px
b
yeah already adapted
Copy code
css
  .bpWebchat {
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  @media (min-width: 1024px) {
    .bpWebchat {
      width: 520px !important;
      height: 100% !important;
      position: fixed !important;
      left: 50% !important;
      top: 0 !important;
      transform: translateX(-50%) !important;
    }
  }
its fullscreen on mobile, center with bg on desktop
Copy code
css
.bpHeaderContentActionsContainer > svg:nth-of-type(2) {
    display: none !important;
}
@best-electrician-47860 this works
b
Okay thank you
o
I replaced the lines with my IDs and I still cant see anything, this is the code I am using below: <!-- Thank you to the Botpress community (https://discord.com/channels/1108396290624213082) for their suggestions regarding this example. A special greeting to François, aka 000Bo, for his post: https://discord.com/channels/1108396290624213082/1272227414197669960 --> Botpress Full-Screen body { display: flex; flex-direction: column; // 000Bo justify-content: center; align-items: center; height: 100vh; margin: 0; color: white; background-color: #000000; font-family: Arial, sans-serif; } h2, h3 {text-align: center} /** * BOTPRESS CUSTOM STYLES */ @media (min-width:768px) { .bpWebchat { width: 100% !important; height: 100% !important; right: 0 !important; bottom: 0 !important; max-height: 100% !important; overflow: auto !important; -webkit-overflow-scrolling: touch; } } Botpress Full-Screen At line 42 replace https://files.bpcontent.cloud/yyyy/mm/dd/hh/yyyymmddhhnnss-XXXXXXXX.js // Open webchat /* webchat:ready doesn't seem to trigger with version 2024100306490 ╭∩╮ (︶︿︶) ╭∩╮ */ //window.botpress.on('webchat:ready', (conversationId) => { botpress.open(); }); window.addEventListener('load', function() { botpress.open(); });
b
using the same code, working just fine
Copy code
js
<script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
<script src='https://files.bpcontent.cloud/2024/10/03/07/xxxxxxx-xxxxx.js'></script>
<script>window.addEventListener('load',function(){botpress.open()});</script>
and the css from the example
and dont page your whole code, use a code page like jsfiddle if its more than a few lines
w
This is my code already in jsfiddle, you don't need to post again. If you are trying in jsfiddle - you paste only the second 
script
(the first is equal for all) and than click the Run button
w
Thanks @white-nest-40686 for being so attentive to this and for the updates !
w
Hi @big-glass-39378, i added your theme in my jsfiddle https://jsfiddle.net/Zannax_Botpress/9ghaeL0r/, If you are not agree tell me, please
b
not really a theme, just css ;)
w
marketing, ahahah
Copy code
js
window.botpress.on('webchat:ready', (conversationId) => { botpress.open(); });
works again
g
Doesn't work for me when I try it in Shopify. Probably something I'm doing wrong tho. Because sending an event on webchat:opened does work. Really need to do something like this before it (sometimes) works: if (!window.botpress || !window.botpress.sendEvent) { console.error("Botpress not ready yet, retrying..."); setTimeout(sendProductViewEvent, 500); // Retry after 500ms return; }
w
It's a possible solution. I use this
Copy code
js
<script>window.addEventListener('load',function(){botpress.open()});</script>
But webchat:opened is triggered only if user open the webchat. I use webchat:ready to open the webchat
g
Yea but the ready isn't working, probably being blocked somewhere or somehow. (Trying in a pretty cluttered shopify theme). And even when it sends a message (before opening) it doesn't show the "1" bubble, but that's the next issue I need to solve... 😅 Wasn't the V1 a lot more stable? https://cdn.discordapp.com/attachments/1272227414197669960/1292436947855216681/Screenshot_2024-10-06_at_12.42.16.png?ex=6703bb34&is=670269b4&hm=acf9e40bb5fc976d589046f804c7550910c3ca06651092dfb4f46018e9560b52&
w
I open webchat to show sended message , i don't like it, but it's the only solution that i've found
g
Ufff that's a tough one. I'll probably mess around with a css class to be shown on message received, but first got to fix the webchat:ready issue 😅 . I'll drop it here if I find a solution for both.
o
suddenl the integration stopped working
the full screen one was working now I get this
w
a new [example](https://jsfiddle.net/Zannax_Botpress/ohfq0est/) about to change bubble image:
Copy code
css
.bpFabIcon {
   background-image: url("https://mediafiles.botpress.cloud/2c56f350-6e19-406a-b018-a4781deb5ff3/integration/icon.svg");
   -webkit-mask: unset;
   mask: unset
}
@wooden-beard-40210 maybe we should change name: Webchat v2: How to embed it in an iframe and enable full screen or create a new one
w
yes you're right, i'll take your suggestion
but i'm not sure people look for answers in #1132038253109837994 before asking questions anyway 😅
w
yup but i can tell them to use search before ask, now search don't find this post 😔
Incredible! This is a ghost post I was looking for: webchat full screen, and I didn't found it. I'm afraid I need to save it as a bookmark to copy and paste. 😩
w
it's because discord only searches for exact matching , i guess ?
i find it when i search 'enable full screen', or 'embed it in an iframe'
w
Okay, luckily nobody uses the search function, ahahahah!
m
Hey, is your fullscreen chatbot still working, because mine stopped working abruptly, it's bugging isn't there a more solid way to do this with botpress v2?
w
please write in #1111009377525186570 channel and give me more details, for example what do you means with "is stopped", thanks
s
Thanks so much for pointing up a month with the solution. 🙂
g
Hello good morning. Because the CSS is not applied when I use the embedded code, it is only applied when I am editing. I always save the changes to see if they update in the example HTML I have, but nothing is applied.
w
sometimes there is problem to open webchat, try with a timeout on load event too:
Copy code
html
<script>
      /* The 'webchat:ready' event sometimes doesn't trigger. */
      window.botpress.on('webchat:ready', (conversationId) => { botpress.open(); });
      window.addEventListener('load', () => setTimeout(() => {if (window.botpress.state !== 'opened') window.botpress.open()}, 2000));
<\script>
b
a
Hi there, I think we have the same issue: even with the timeout, sometimes the webchat will open, sometimes not. The documentation page is very recent, I don't get why Botpress has published something which clearly doesn't work well?
k
@white-nest-40686 is there any way to add a line to your fiddle code (Which is working for me! Thanks again) to just have the chatbot open up on it's own - so instead of having to click the bubble to start chatting?
b
I have the same problem it does that because we don't have a conversation id v2.1 works fine but doesn't have all the features you have to find a way to create a conversation id before giving the order to open the chat bot
k
If anyone is able to figure this out it would be incredible
a
We had a similar problem to display the webchat, so one of our dev "forced" the display in css
Copy code
#bp-web-widget-container {
     z-index: 999999 !important;
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
   }
Not the best solution but for now it works for us
k
@agreeable-fish-28059 do you post that in the "theme" on botpress or on the code?
s
@User where did you put the CSS to force the display? can you share your code snippet?
b
Can I also change the style of the bot on my website? Like background collar and letter type. Can I also remove the profile image and name in the center of the bot?
w
yes you can edit the styles of your bot in the settings on the dashboard
and for further customization, you can add your own css
k
@agreeable-fish-28059 any update on the css code?
@white-nest-40686 if you're able to figure this out it would be amazing
@white-nest-40686 So I recently transitioned to the new webchat. In v1 I had this line of code: "useSessionStorage": true, so that there would be a new chat each time (open up a new tab etc.) but I can't figure out where to put this code into the new version of webchat. Is it in CSS or on my platform? Any tips??
w
a
hey guys been following many guides and reading through the chats for solutions to this, I am currently at the "sometimes it works, sometimes it doesnt" stage. If anyone has an update on this would appreciate.
s
Hi folks, at this point I am totally lost and don't know what to do. So I'm a non-coder user, mainly I am trying to create my site using a combination of Botpress and Lovable.dev. Now I don't know how to make Lovable able to make the bot appear full-screen, no prompt is working at this point; even helped by ChatGPT. Is there anyone who can walk me through how to check or what to do?
c
Thank you so much for this! The Full Width in a DIV code worked for me. I fixed the color. I'm so excited this worked!
j
Good morning, I have copied the code into a WordPress to embed the open chat and it works for a period of time, then it stays minimized and cannot be opened, how do you embed the chat in a page expanded?
<iframe style="height: 100%; width: 100%; border: none;" srcdoc=' window.botpress.on("webchat:ready", (conversationId) => { botpress.open(); }); window.botpress.init({ "botId": "d3aea06d-0f04-4701-bec3-b457caf79902", "configuration": { "website": {}, "email": {}, "phone": {}, "termsOfService": {}, "privacyPolicy": {}, "color": "#3B82F6", "variant": "solid", "themeMode": "light", "fontFamily": "inter", "radius": 1 }, "clientId": "0e772c62-e321-46b5-a9fb-a88c5104e067" }); ' >
I was able to solve it with these scripts
// Wait for webchat to be ready window.botpress.on("webchat:ready", () => { // Set delay in milliseconds (e.g., 5000ms = 5 seconds) setTimeout(() => { window.botpress.open(); }, 5000); });
m
Hi @white-nest-40686 I have a question. You posted the code for Botpress Full-Width in a DIV v2.2 (https://jsfiddle.net/Zannax_Botpress/h8g1kx7f/). Do you know why your code don't work for div width > 768px even though you have written the additiona style? https://cdn.discordapp.com/attachments/1272227414197669960/1338915244344344586/image.png?ex=67acd17e&is=67ab7ffe&hm=7110a9d4ee4c85e01ccd0569437542607ded114efc48be1be7e20d37c3d629ac&
it's a screenshot from your link
when you add !important to every of your style it's back to normal
w
Thank you, you're right. I hadn't updated the example to override the media query (min-width:768px) that Botpress added later.
b
Hello, we need the advanced setting to do that ?
So the Plus Plan ?
w
No you don't need it
b
Hello, the embed chatbot work on desktop but on my phone (Iphone) it don't display... Do you know why ? 🫡
I believe I've resolved the issue. iOS blocks certain scripts, such as botpress.open();, so I implemented a workaround using:
Copy code
<script>
  document.addEventListener("DOMContentLoaded", function () {
    setTimeout(() => {
      botpress.open();
    }, 500); // Wait 0,5 seconde
  });
</script>
Hello, how did you bypass the 767px issue? I tried displaying my bot at widths up to 767px, but it didn't work. Here my code (style):
Copy code
<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>Botpress Full-Width in a DIV</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      /*body {
        display: flex;
        flex-direction: column; // 000Bo
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        color: white;
        background-color: #000000;
        font-family: Arial, sans-serif;
      }*/
      
      h2, h3 {text-align: center}

      .container-bpFull {
        display: flex;
        flex-direction: column; // 000Bo
        justify-content: center;
        align-items: center;
      }
        
      .center-div {
        width: 100vw;
        height: 80vh;
        background-color: rgb(102, 71, 255);
        border-radius: 15px;
        padding: 5px;
        box-sizing: border-box;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      @media only screen and (min-width: 1024px) {
        .center-div {
          width: 50vw;
        }
      }

 /*     @media only screen and (max-width: 1024px) {
        .center-div {
          width: 80vw;
        }
      }*/

      #bpFull { 
        width: 100%;
        height: 100%;
        border: none;
        overflow: auto; /* Allow iframe to be scrollable */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS Safari */
      }
    </style>
  </head>
</html>
w
In the iframe srcdoc, see the example source code
b
hello people, have you tried just creating an iframe from the URL? 😂🧐
you cannot change colors but it works
w
Yes, but this solution is to place all the scripts in one snippet for those who do can't to create a second file on their website (such as WordPress, Wix, etc.).
However, you may not use iframes too https://botpress-docs.readme.io/docs/webchat-v2
41 Views
PreviousNext
Powered by